<template>
    <div>
        <el-row>
            <el-col :span="8">
                <div id="main1" style="width: 400px; height: 300px"></div>
            </el-col>
            <el-col :span="8">
                <div id="main2" style="width: 400px; height: 300px"></div>
            </el-col>
            <el-col :span="8">
                <div id="main3" style="width: 400px; height: 300px"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

const drawBar = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main1"));
    // 绘制图表
    myChart.setOption({
        title: {
            text: "衣服销售统计",
        },
        tooltip: {},
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
            {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
            },
        ],
    });
};

const drawLine = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main2"));
    // 绘制图表
    myChart.setOption({
        title: {
            text: "衣服销售统计",
        },
        tooltip: {},
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
            {
                name: "销量",
                type: "line",
                data: [5, 20, 36, 10, 10, 20],
            },
        ],
    });
};

const drawPie = () => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main3"));

    var option = {
        title: {
            text: "广告收益统计",
            subtext: "最近一周",
            left: "center",
        },
        tooltip: {
            trigger: "item",
        },
        legend: {
            orient: "vertical",
            left: "left",
        },
        series: [
            {
                name: "收入来源",
                type: "pie",
                radius: "50%",
                data: [
                    { value: 1048, name: "搜索引擎" },
                    { value: 735, name: "直接访问" },
                    { value: 580, name: "邮件" },
                    { value: 484, name: "连接广告" },
                    { value: 300, name: "视频广告" },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
            },
        ],
    };

    // 绘制图表
    myChart.setOption(option);
};

onMounted(() => {
    drawBar();
    drawLine();
    drawPie();
});
</script>

<style scoped></style>
